<template>
  <view class="gui-select-menu-wrap">
    <!-- #ifndef APP-NVUE -->
    <view
      class="gui-masker"
      v-if="show"
      @tap.stop.prevent="close"
      @touchmove.stop.prevent="stopfun"
      :style="{ zIndex: zIndex - 1 }"
    ></view>
    <!-- #endif -->
    <view
      class="gui-select-menu-title gui-flex gui-rows gui-nowrap gui-justify-content-center gui-align-items-center"
      @click.stop="showMenu"
      id="menuMain"
    >
      <text
        class="gui-block gui-ellipsis gui-primary-text"
        :style="{
          fontSize: fontSize,
        }"
        >{{ itemsIn[currentIndex] }}</text
      >
      <text
        :style="{ fontSize: fontSize }"
        class="gui-icons gui-select-menu-title-icon gui-block gui-primary-text"
        v-if="!show"
        >&#xe603;</text
      >
      <text
        :style="{ fontSize: fontSize }"
        class="gui-icons gui-select-menu-title-icon gui-block gui-primary-text"
        v-if="show"
        >&#xe654;</text
      >
    </view>
    <view
      class="gui-select-menu"
      v-if="show"
      :style="{
        top: top + 'px',
        zIndex: zIndex,
      }"
      @tap.stop="close"
      @touchmove.stop.prevent="stopfun"
    >
      <view style="margintop: 90rpx; height: 0px"></view>
      <view
        style="padding-bottom: 10rpx"
        @tap.stop="stopfun"
        class="gui-select-item gui-flex gui-rows gui-nowrap gui-align-items-center gui-bg-white gui-dark-bg-level-3"
        v-if="isInput"
      >
        <view class="gui-select-input gui-flex1 gui-bg-gray gui-dark-bg-level-1">
          <input
            type="text"
            v-model="inputVal"
            style="margin: 15rpx"
            class="gui-form-input gui-flex1 gui-border-box"
            @confirm="addTag"
            @input="inputting"
            :placeholder="placeholder"
          />
        </view>
        <!-- 添加 -->
        <text class="gui-select-input-btn gui-block gui-primary-text" v-if="inputType == 'add'" @tap.stop="addTag">{{
          addBtnName
        }}</text>
        <!--  -->
        <text
          class="gui-select-input-btn gui-block gui-primary-text"
          v-else-if="inputType == 'search'"
          @tap.stop="addTag"
          >搜索</text
        >
      </view>
      <scroll-view
        :scroll-y="true"
        :show-scrollbar="false"
        :style="{ height: height, marginTop: '-2px' }"
        class="gui-select-menus gui-border-box gui-bg-white gui-dark-bg-level-3"
        :scroll-into-view="itemTo"
      >
        <view
          class="gui-select-item gui-flex gui-rows gui-nowrap gui-align-items-center"
          v-for="(item, index) in itemsIn"
          :key="index"
          :data-index="index"
          @tap.stop="select"
          :style="{ height: itemHeight }"
          :id="'items' + index"
        >
          <text
            class="gui-selected-icon gui-icons gui-primary-color"
            :style="{ fontSize: fontSize }"
            v-if="index == currentIndex"
            >&#xe7f8;</text
          >
          <text class="gui-primary-text" :style="{ fontSize: fontSize }">{{ item }}</text>
        </view>
        <view style="height: 25rpx" class="gui-bg-white gui-dark-bg-level-3"></view>
      </scroll-view>
    </view>
  </view>
</template>
<script scoped>
export default {
  name: "gui-select-menu",
  props: {
    items: {
      type: Array,
      default: function () {
        return []
      },
    },
    selectIndex: { type: Number, default: 0 },
    isH5header: { type: Boolean, default: true },
    fontSize: { type: String, default: "28rpx" },
    zIndex: { type: Number, default: 299 },
    isInput: { type: Boolean, default: false },
    placeholder: { type: String, default: "请输入自定义条件" },
    addBtnName: { type: String, default: "+ 添加" },
    height: { type: String, default: "500rpx" },
    itemHeight: { type: String, default: "88rpx" },
    inputType: { type: String, default: "add" },
  },
  data() {
    return {
      currentIndex: 0,
      top: 0,
      showRes: [],
      inputVal: "",
      show: false,
      itemsIn: [],
      itemTo: "",
    }
  },
  watch: {
    selectIndex: function () {
      this.currentIndex = this.selectIndex
    },
    items: function (val) {
      this.itemsIn = val
    },
  },
  created: function () {
    this.currentIndex = this.selectIndex
    this.itemsIn = this.items
  },
  methods: {
    stopfun: function (e) {
      e.stopPropagation()
      return
    },
    showMenu: function () {
      uni
        .createSelectorQuery()
        .in(this)
        .select("#menuMain")
        .fields({ rect: true }, (res) => {
          this.top = res.top - 1
          // #ifdef H5
          if (this.isH5header) {
            this.top += 44
          }
          // #endif
          this.show = true
          this.$emit("showMenu")
        })
        .exec()
    },
    close: function () {
      setTimeout(() => {
        this.show = false
      }, 100)
      this.$emit("close")
    },
    select: function (e) {
      var index = Number(e.currentTarget.dataset.index)
      this.currentIndex = index
      this.$emit("select", index, this.items[index])
      this.close()
    },
    addTag: function () {
      if (this.inputVal == "") {
        return
      }
      if (this.inputType == "add") {
        var newArr = JSON.stringify(this.itemsIn)
        newArr = JSON.parse(newArr)
        newArr.unshift(this.inputVal)
        this.itemsIn = []
        this.itemsIn = newArr
        this.$emit("submit", this.inputVal)
        this.inputVal = ""
        this.currentIndex = 0
        this.close()
      } else {
        this.search()
      }
    },
    getSize: function () {
      return this.itemsIn.length - 1
    },
    setCurrentIndex: function (index) {
      this.currentIndex = index
    },
    search: function () {
      var searchIndex = -1
      for (var i = 0; i < this.itemsIn.length; i++) {
        if (this.itemsIn[i].indexOf(this.inputVal) != -1) {
          searchIndex = i
          break
        }
      }
      if (searchIndex != -1) {
        this.itemTo = "items" + searchIndex
      }
    },
    inputting: function () {
      if (this.inputType == "search") {
        this.search()
      }
    },
  },
  emits: ["showMenu", "close", "select", "submit"],
}
</script>
<style scoped>
.gui-masker {
  width: 750rpx;
  position: fixed;
  left: 0;
  top: 250rpx;
  bottom: 0;
  flex: 1;
  background-color: rgba(0, 0, 0, 0.3);
}
.gui-select-menu-title {
  height: 100rpx;
}
.gui-select-menu-title-icon {
  margin-left: 5px;
  margin-top: 3px;
}
.gui-select-menu {
  position: fixed;
  width: 750rpx;
  left: 0;
  top: 0;
}
.gui-select-menus {
  height: 300px;
}
.gui-select-item {
  padding: 0 25rpx;
  height: 88rpx;
}
.gui-selected-icon {
  margin-right: 15rpx;
}
.gui-select-input {
  width: 200rpx;
  padding: 0 16rpx;
  border-radius: 60rpx;
}
.gui-select-input-btn {
  width: 100rpx;
  line-height: 68rpx;
  height: 68rpx;
  text-align: center;
  font-size: 28rpx;
  border-radius: 6rpx;
  margin-left: 15rpx;
}
</style>
